<template>
    <div>
        <!-- <img src="http://47.93.251.150:8080/cy/image/log3.png" alt=""> -->
        <div class="searchBox">
            <el-button  class="searchBtn" type="primary" size= 'medium' @click = "searchName()" v-show="!isSearch">搜索</el-button>
            <el-button  class="searchBtn" type="primary" size= 'medium' @click = "returnDish()" v-show="isSearch">返回</el-button>
            <!-- <input type="text" class="dishName" v-model="selectDishName" placeholder="请输入菜品名字"> -->
            <el-input  size = 'medium' class="dishName" v-model="selectDishName" placeholder="请输入菜品名字" ></el-input>
            
            <!-- <diySelect :optionData="optionData" @choose="searchType" size="mini" class="searchType"></diySelect> -->
            <div class="btnBox">
                <el-button  class="newDish" type="primary" size= 'medium' @click="newDishs()">新增菜品</el-button>
            </div>      
        </div>
        <el-table :data = 'currentData' style="width:100%" border
            :header-cell-style="this.$store.state.headerCssObj"    
            :cell-style="this.$store.state.cellCssObj"
            border
            class="dishs"
            >
                <el-table-column align = 'center' prop = 'id' label = 'id'></el-table-column>
                <el-table-column align = 'center' label = '图片'>
                    <template slot-scope="scope">
                        <div class="imgCol"><img :src="scope.row.url" alt=""></div>
                    </template>  
                </el-table-column>
                <el-table-column align = 'center' prop = 'name' label = '菜名'></el-table-column>
                <el-table-column align = 'center' prop = 'price' label = '单价'></el-table-column>
                <el-table-column align = 'center' prop = 'type' label = '类型'></el-table-column>
                <el-table-column align = 'center' label = '操作' >
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="editDishs(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="deleteDishs(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column> 
            </el-table>
            
        <div class="paging"><paging :obj = 'pagingData' ></paging></div>
        <!-- 修改弹框 -->
        <el-dialog center
            title="修 改"
            :visible.sync="showEdit"
            width="30%"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            >
                <form action="">
                    <ul class="formBox">
                        <li class="formItem">
                            <label for="">名字：</label>
                            <el-input v-model="dishName" size = 'medium'></el-input>
                        </li>
                        <li class="formItem">
                            <label for="">价格：</label>
                            <el-input v-model="dishPrice" size = 'medium'></el-input>
                        </li>
                        <li class="formItem">
                            <label for="">类型：</label>
                            <diySelect :optionData="optionData" @choose="chooseType" 
                            :propsValue="selectValue"
                            size="medium" class="chooseType"></diySelect>
                        </li>
                    </ul>
                    <div class="imgRow">
                        <label>图片:</label>
                        <div class="imgBox">
                            <div class="imgContent">
                                <img v-if="imgUrl!=''" :src="imgUrl">
                            </div>
                            <div class="upload">
                                <input type="file" @change="showImg($event)">
                                <span>更换图片</span>
                            </div>
                        </div>
                    </div>
                    <div class="oprateBtn">
                        <el-button   type="primary" size= 'medium' @click="saveEdit()">保存</el-button>
                        <el-button   type="primary" size= 'medium' @click="cancelEdit()">取消</el-button>
                    </div>
                </form>
                
        </el-dialog>
        <!-- 删除弹框 -->
         <el-dialog center
            title="删 除"
            :visible.sync="showDelete"
            width="30%"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            >
                <p class="tips">确认删除该菜品吗?</p>
                <div class="oprateBtn">
                    <el-button   type="primary" size= 'medium' @click="sureDelete()">确认</el-button>
                    <el-button   type="primary" size= 'medium'@click="cancelDelete()">取消</el-button>
                </div>
        </el-dialog>
        <!-- 新增菜品弹框 -->
        <el-dialog center
            title="新 增"
            :visible.sync="showNewDishs"
            width="30%"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            >
                <form>
                    <ul class="formBox">
                        <li class="formItem">
                            <label for="">名字：</label>
                            <el-input v-model="dishName" size = 'medium'></el-input>
                        </li>
                        <li class="formItem">
                            <label for="">价格：</label>
                            <el-input v-model="dishPrice" size = 'medium'></el-input>
                        </li>
                        <li class="formItem">
                            <label for="">类型：</label>
                            <diySelect :optionData="optionData" @choose="chooseType" 
                            size="medium" class="chooseType" :propsValue="selectValue"></diySelect>
                        </li>
                    </ul>
                    <div class="imgRow">
                        <label>图片:</label>
                        <div class="imgBox">
                            <div class="imgContent">
                                <img v-if="imgUrl!=''" :src="imgUrl">
                            </div>
                            <div class="upload">
                                <input type="file" @change="showImg($event)" name="axiosFile" accept=".jpg, .jpeg, .png, .jfif">
                                <span>上传图片</span>
                                
                            </div>
                        </div>
                    </div>
                </form>
                <div class="oprateBtn">
                    <el-button   type="primary" size= 'medium' @click="saveNewDishs()">保存</el-button>
                    <el-button   type="primary" size= 'medium' @click="cancelNewDishs()">取消</el-button>
                </div>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "foodsSetPage",
        data(){
            return{
                currentPage:1,
                row:4,
                selectDishName:'',
                selectValue:'',
                isSearch:false,
                showEdit:false,//控制修改弹框的显示
                showDelete:false,//控制删除弹框的显示
                // currentData:[],
                dishDetail:{
                    name:'',
                    price:'',
                    type:'',
                },//存储修改的数据
                deleteId:'',//存储要删除的菜品的id
                showNewDishs:false,
                dishName:'',
                dishType:'',
                dishPrice:'',
                dishId:'',
                imgUrl:'',
            }
        },
        computed:{
            ...mapState('foodsSet',['dishData','pageSize','dishTypeData']),
            currentData(){
                let data = []
                for(let i = 0; i < this.dishData.length; i ++){
                    let obj = {}
                    obj.id = this.dishData[i].dishes_main_id;
                    obj.name = this.dishData[i].name;
                    obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishData[i].dishesAppendix.dishes_appendix_name
                    // obj.url = this.dishData[i].dishesAppendix.dishes_appendix_store + this.dishData[i].dishesAppendix.dishes_appendix_name
                    obj.price = this.dishData[i].price
                    obj.type = this.dishData[i].dishesClassify.name
                    console.log(obj.url)
                    data.push(obj);
                }
                return data;
            },
            optionData(){
                let arr = [];
                for(let i = 0; i < this.dishTypeData.length; i ++){
                    let obj = {
                        value:i+1,
                        label:this.dishTypeData[i].name
                    }
                    arr.push(obj)
                }
                return arr;
            },
            reqDishData(){
                let obj = {
                    countPage:this.row,
                    perPage:this.currentPage,
                }
                return obj
            },
            pageCount(){
                return this.pageSize
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:this.row,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        if(that.isSearch){
                           that.currentPage = num;
                            let obj = {
                                name:that.selectDishName,
                                countPage:that.row,
                                perPage:that.currentPage,
                            }
                        that.searchDishName(obj)
                        }else{
                            that.currentPage = num;
                            that.getDishData(that.reqDishData)
                        } 
                                                  
                    },
                    pageCount:that.pageCount,//一共有几页
                }
                return data 
            },
            
        },
        methods:{
            ...mapActions('foodsSet',['getDishData','searchDishName','addDish','editDish','deleteDish','getTypeData']),
            showImg: function(event) {
                this.file = event.target.files[0];
                console.log(this.file,9999)
                let url = "";
                var reader = new FileReader();
                reader.readAsDataURL(this.file);
                let that = this;
                reader.onload = function(e) {
                url = this.result.substring(this.result.indexOf(",") + 1);
                that.imgUrl = "data:image/png;base64," + url;
                };
            },
            beforeupload(file){
                console.log(file,999)
            },
            searchName(){
                this.currentPage = 1;
                if(this.selectDishName !== ''){
                    let obj = {
                        name:this.selectDishName,
                        countPage:this.row,
                        perPage:this.currentPage,
                        }
                    this.searchDishName(obj).
                    then(res=>{
                        if(res == 'success'){
                            this.$message.success({message: '查询成功！！'})
                            this.isSearch = true;
                        }else{
                           this.$message.error('查询失败!') 
                        }
                    }

                        // 这里需要拿到搜索后得到的数据
                    ) 

                }else{
                    this.$message.error('请输入菜品名字！！！')
                }
            },
            editDishs(obj){
                this.showEdit = true;
                this.dishName = obj.name;
                this.dishType = obj.type;
                this.dishPrice = obj.price;
                this.dishId = obj.id;
                this.selectValue = obj.type
                this.imgUrl = obj.url
            },
            saveEdit(){
                // 向服务器发起请求，保存我的修改
                // 先验证是否为空,在验证价格是否为数字
                let reg = /^\d+(\.\d+)?$/              
                if(this.dishName != '' && this.dishPrice != '' && this.dishType != ''){
                    if(reg.test(this.dishPrice)){
                        let formeData = new FormData();
                        formeData.append('file',this.file);
                        formeData.append('name',this.dishName);
                        formeData.append('cname',this.dishType);
                        formeData.append('price',this.dishPrice);
                        formeData.append('dishes_main_id',this.dishId);  
                        this.editDish(formeData).
                        then(res=>{
                            if(res == 'success'){
                                this.$message.success({message: '修改成功！'})
                                this.getDishData(this.reqDishData)
                                let op = {userName:this.$store.state.user.userName,
                                    operationDate:this.$store.state.nowTime.time, operationMessage:'修改菜品'}
                                this.$store.dispatch('userOperation',op)
                            }else{
                                this.$message.error('修改失败！!')
                            }
                        })
                    }
                }
                this.showEdit = false
                console.log(this.dishDetail)
            },
            cancelEdit(){
                this.showEdit = false;
            },
            deleteDishs(id){
                this.showDelete = true;
                this.deleteId = id;
            },
            sureDelete(){
                this.showDelete = false;
                // 向服务器发起请求根据id改变该菜品状态
                let obj ={
                    dishes_main_id:this.deleteId
                }
                this.deleteDish(obj).
                then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '删除成功！！'})
                        this.getDishData(this.reqDishData).
                        then(res=>{
                            if(res == 'success'){    
                                if(this.currentData.length == 0){
                                    this.currentPage --;
                                    this.getDishData(this.reqDishData)
                                    let op = {userName:this.$store.state.user.userName,
                                        operationDate:this.$store.state.nowTime.time, operationMessage:'删除菜品'}
                                    this.$store.dispatch('userOperation',op)
                                }
                            }
                        })
                        

                    }else{
                        this.$message.error('删除失败！!')
                    }
                })
                
            },
            cancelDelete(){
                this.showDelete = false;
            },
            newDishs(){
                this.showNewDishs = true;
                this.imgUrl = '';
                this.selectValue = ''
                this.dishName = '';
                this.dishType = '';
                this.dishPrice = '';
                this.dishId = '';
                this.getTypeData()
            },
            chooseType(val){
                this.selectValue = val
                this.dishType = this.optionData[val-1].label;
            },
            saveNewDishs(){
                let reg = /^\d+(\.\d+)?$/              
                if(this.dishName != '' && this.dishPrice != '' && this.dishType != '' && this.file != ''){
                    if(reg.test(this.dishPrice)){
                        let formData = new FormData();
                        formData.append('file',this.file);
                        formData.append('name',this.dishName);
                        formData.append('cname',this.dishType);
                        formData.append('price',this.dishPrice);
                        this.addDish(formData).
                        then(res=>{
                            if(res == 'success'){
                                this.$message.success({message: '添加菜品成功！'})
                                this.getDishData(this.reqDishData)
                                let op = {userName:this.$store.state.user.userName,
                                    operationDate:this.$store.state.nowTime.time, operationMessage:'添加菜品'}
                                this.$store.dispatch('userOperation',op) 
                                
                            }else{
                                this.$message.error('添加菜品失败!!')
                            }
                            
                        })    
                    }else{
                        this.$message.error('请输入有效的价格!!')
                    }
                }  
                this.showNewDishs = false;

            },
            returnDish(){
                this.selectDishName = ''
                this.isSearch = false
                this.getDishData(this.reqDishData)
             },
            cancelNewDishs(){
                this.showNewDishs = false;
            }           
        },
        
        created(){
            this.getDishData(this.reqDishData)
        }
    }
</script>

<style scoped lang = 'less'>
    .imgCol{
        width: 60px;
        height: 60px;
        display: inline-block;
        position: relative;
        img{
            width: 100%;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }
    .imgUpload{
        width: 100px;
        height: 100px;
    }
    .searchBox{
        height: 30px;
        margin-top: 30px;
        .dishName{
            float: right;
            width: 150px;
            height: 30px;
            border: none;
            padding: 0;
            text-indent: 10px;
            margin-right: 20px;
            outline: none;
        }
        .searchBtn{
            float: right;
            width: 100px;
            margin-left: 10px;
        }
        .btnBox{
            float: left;
            width: 230px;
            height: 30px;
            margin-right: 10px;
            position: relative;
            .placeOrder,.performace,.existOrder{
                width: 100px;
                position: absolute;
                left: 115px;
                margin-left: -50px;
            }
            .existOrder{
                right: 10px;
            }
        }
    }
    .dishs{
        margin-top: 30px;
    }
    .paging{
        margin-top: 30px;
        text-align: center;
    }
    .formBox{
        list-style: none;
        border: 1px solid #fff;
        padding: 0;
        .formItem{
            margin-top: 20px;
            text-align: center;
            label{
                display: inline-block;
                width: 80px;
                color: #000;
                text-align: center;
                line-height: 30px;
                margin-right: 10px;
            }
            .el-input{
                width: 50%;
                display: inline-block;
            }
            .chooseType{
            width: 50%!important;
            }
        }
    }
    .imgBox{
        display: inline-block;
        width: 50%;
        height: 50px;
        text-align: left;
        top: 17px;
        position: relative;        
        .imgContent{
            width: 50px;
            height: 50px;
            position: absolute;
            left: 0;
            img{
                width: 100%;
                position: absolute;
                margin: auto;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
        .upload{
            display: inline-block;
            width: 100px;
            height: 30px;
            background: #409eff;
            color: #fff;
            border-radius: 4px;
            position: absolute;
            top: 25px;
            margin-top: -15px;
            right: 0;
            overflow: hidden;
            input{
                width: 100px;
                position: absolute;
                height: 30px;
                left: 0;
                top: 0;
                opacity: 0;
                z-index: 1;
                cursor: pointer;
            }
            span{
                display: inline-block;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 0;
            }
        }
    }
    .imgRow{
        text-align: center;
        line-height: 50px;
        label{
            display: inline-block;
            height: 30px;
            width: 80px;
            color: #000;
            text-align: center;
            line-height: 30px;
            margin-right: 10px;
           
        }
    }
    .oprateBtn{
        text-align: center;
        margin-top: 30px;
        button{
            width: 100px;
            margin-left: 10px;
            margin-right: 10px;
        }
    }
    .tips{
        text-align: center;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }


</style>